<!DOCTYPE html>
<html lang="en"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org" layout:decorate="layout"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
<!-- page content -->
<div layout:fragment="content" class="right_col" role="main">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            用户管理 <i class="fa fa-user"></i>
                            <small>
                                - 您可以通过搜索或者其他的筛选项对用户的信息进行编辑、删除等管理操作。^_^
                            </small>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form id="search-form" method="post" th:action="@{/user/list}" action="/user/list"
                              class="form-horizontal form-label-left">
                            <input type="hidden" id="form-page-no" name="pageNo"/>
                            <input type="hidden" id="form-page-size" name="pageSize"/>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">用户名称</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <input name="usrName" type="text"
                                           class="form-control col-md-6 col-xs-12" value="" th:value="${usrName}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">角色</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <select name="roleId" id="roleId" class="form-control" required="required">
<!--                                        <option value="0">&#45;&#45;请选择&#45;&#45;</option>-->
<!--                                        <option th:each="role,status:${roles}" th:value="${role.roleId}"-->
<!--                                                th:text="${role.roleName}" value=""-->
<!--                                                th:selected="${role.roleId==roleId}">角色-->
<!--                                        </option>-->
                                    </select>
                                </div>
                            </div>
                            <div class="ln_solid"></div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                    <button type="submit" class="btn btn-primary"> 查 &nbsp;&nbsp;&nbsp;&nbsp;询</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"></p>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <a href="/user/add" th:href="@{/user/add}"
                                       class="btn btn-success btn-sm" shiro:hasPermission="用户添加">新增用户信息</a>
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">编号
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                用户名
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                角色
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                操作
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr role="row" class="odd" th:each="user:${userPager.content}">
                                            <td tabindex="0" class="sorting_1" th:text="${user.usrId}">usrId</td>
                                            <td th:text="${user.usrName}">usrName</td>
                                            <td th:text="${user.role.roleName}">roleName</td>
                                            <td>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-danger">点击操作</button>
                                                    <button type="button" class="btn btn-danger dropdown-toggle"
                                                            data-toggle="dropdown" aria-expanded="false">
                                                        <span class="caret"></span>
                                                        <span class="sr-only">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a class="editInfo" href="/user/edit.html?usrId=1" th:href="@{|/user/edit/${user.usrId}|}"
                                                               data-toggle="tooltip" data-placement="top" title=""
                                                               data-original-title="编辑">编辑</a></li>
                                                        <li><a class="delInfo" id="del" href="#"
                                                               th:onclick="|doDel(this,${user.usrId})|"
                                                               data-toggle="tooltip" data-placement="top" title=""
                                                               data-original-title="删除">删除</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-12">
                                    <nav class="pull-right">
                                        <ul class="pagination">

                                            <div class="col-sm-5">
                                                <div class="dataTables_info" id="datatable-responsive_info"
                                                     role="status" aria-live="polite">共
                                                    <span th:text="${userPager.totalElements}">1</span>条记录
                                                    <span th:text="${userPager.number+1}">1</span>/
                                                    <span th:text="${userPager.totalPages}">1</span>页
                                                </div>
                                            </div>

                                            <div class="col-sm-7">
                                                <div class="dataTables_paginate paging_simple_numbers"
                                                     id="datatable-responsive_paginate">
                                                    <ul class="pagination">
                                                        <li class="paginate_button previous"
                                                            th:if="${userPager.number gt 0}">
                                                            <a href="#"
                                                               th:onclick="|page_nav(1,${userPager.totalPages})|"
                                                               aria-controls="datatable-responsive" data-dt-idx="0"
                                                               tabindex="0">首页</a>
                                                        </li>

                                                        <li class="paginate_button" th:if="${userPager.number gt 0}">
                                                            <a href="#"
                                                               th:onclick="|page_nav(${userPager.number},${userPager.totalPages})|"
                                                               aria-controls="datatable-responsive" data-dt-idx="1"
                                                               tabindex="0">上一页</a>
                                                        </li>

                                                        <li class="paginate_button"
                                                            th:if="${(userPager.number+1) lt userPager.totalPages}">
                                                            <a href="#"
                                                               th:onclick="|page_nav(${userPager.number+2},${userPager.totalPages})|"
                                                               aria-controls="datatable-responsive" data-dt-idx="1"
                                                               tabindex="0">下一页</a>
                                                        </li>

                                                        <li class="paginate_button next"
                                                            th:if="${(userPager.number+1) lt userPager.totalPages}">
                                                            <a href="#"
                                                               th:onclick="|page_nav(${userPager.totalPages},${userPager.totalPages})|"
                                                               aria-controls="datatable-responsive" data-dt-idx="7"
                                                               tabindex="0">最后一页</a>

                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <script>
                                                function page_nav(pageNo,pageSize){
                                                    pageNo= pageNo || 1;
                                                    pageSize=pageSize || 5;
                                                    document.getElementsByName("pageNo")[0].value = pageNo;
                                                    document.getElementsByName("pageSize")[0].value = pageSize;
                                                    document.forms[0].submit();
                                                }
                                            </script>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>